<template>
    <div id="add-edit-model">
        <el-dialog
            :title="$t('4AnfJu602YfY8Is0zhgso')"
            v-model="isLookDialog" 
            draggable 
            :close-on-click-modal="false" 
            width="769px" 
            :before-close="handleClose"
            :destroy-on-close="true"
        >
            <div style="text-align: center;font-size: 18px">{{ contentRecord.title }}</div>
            <br />
            <div style="text-align: right;font-size: 10px">
                <span>{{ $t('iXKpqihOpvQzKIxMq9Juc', [contentRecord.publicUserName]) }}</span>
                <span>{{ $t('sOaJ3PGrGn7leMmc0HeJ2', [contentRecord.publicTime]) }} </span>
            </div>
            <div>
                <label v-html="contentRecord.content"></label>
            </div>
        </el-dialog>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive , computed , toRef , toRefs , toRaw , onMounted , watch } from 'vue'
import { FormInstance, FormRules , ElMessage, ElButton, ElCol, ElDatePicker, ElDialog, ElDivider, ElForm, ElFormItem, ElInput, ElOption, ElRadio, ElRow, ElSelect, ElTable, ElTableColumn } from 'element-plus'
import { sysNoticeDetail } from '/@/api/manage/manage.ts'
/*** 定义接口基础数据类型 */
interface formType {
    repeatDis: Boolean,
    ruleForm: ruleFormType,
}
/*** form 表单数据类型 */
type ruleFormType = {}
export default defineComponent( {
    name: 'add-edit-model',
    components: {},
    props: {
        isLookDialog:{
            type: Boolean,
            default: false,
        },
        lookInfo: {
            type: String,
            default: ''
        }
    },
    setup(props,ctx){
        const ruleFormRef = ref()
        /*** state 引用接口定义基础数据初始值 */
        const contentRecord = reactive ({
            title: '',
            publicUserName: '',
            publicTime: '',
            content: ''
        })

        /*** 基础验证 rules */
        const rules = reactive < FormRules > ({
            /*** 放置验证 */
            // name: [
			// 	{ required: true, message: '请输入角色名', trigger: 'blur' },
			// ],
        })

        /*** handleClose 关闭按钮点击事件 */
        const handleClose = () => {
            ctx.emit('cancelLookClick')
        }

        /*** GetUseInfo 获取用户信息 */
        const GetUseInfo = async (id:any) => {
            try {
                let res: { data: any } = await sysNoticeDetail({ id: id })
                console.log(res.data,'data数据')
                contentRecord.title = res.data.title
                contentRecord.publicUserName = res.data.publicUserName ? res.data.publicUserName : '-'
                contentRecord.publicTime = res.data.publicTime.includes('1900-01-01') ? '-' : res.data.publicTime
                contentRecord.content = res.data.content
            } catch (err) {}
        }

        /*** 监听isLookDialog的变化 */
        watch(() => props.isLookDialog,(newVal) => {
            if(newVal){
                GetUseInfo(JSON.parse(props.lookInfo).id)
            }
        })

        /*** isLookDialog 响应弹窗的关闭  */
        const isLookDialog = computed(() => {
            return props.isLookDialog
        })

        return {
            handleClose,
            ruleFormRef,
            contentRecord,
            isLookDialog,
            rules,
        }
    },
} )
</script>
<style scoped lang="scss">
</style>